<template>
  <div class="login">
    <div class="mianbox">
      <h2>后台登录</h2>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { passRule, usernameRule } from '@/utils/vaildata.js';
import { setToken } from '@/utils/setToken.js'
import { getlogin } from '@/API/api.js'

export default {
  data() {
    return {
      ruleForm: {
        password: '',
        username: '',
      },
      rules: {
        password: [{ validator: passRule, trigger: 'blur' }],
        username: [{ validator: usernameRule, trigger: 'blur' }],
      },
    };
  },

  methods: {
 
    submitForm(form) {
      // console.log(this.ruleForm);
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          getlogin(this.ruleForm).then((res) => {
            console.log(res);
            if(res.status === 200){
                setToken('username',res.username)
                setToken('token',res.token)
                this.$router.push('/')
            }
          });
        }
      });
      // getlogin(this.form).then(res=>{
      //     console.log(res);
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  height: 100vh;
}
.mianbox {
  h2 {
    text-align: center;
  }
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  // height: 400px;
}
</style>
